<template>
	<view class="addAddress">
		<!-- 内容 -->
		<view class="content">
			<view class="item">
				<view class="left">收件人</view>
				<input class="ipt" type="text" v-model="name" placeholder="请输入收件人姓名" />
			</view>
			<view class="item">
				<view class="left">电话号码</view>
				<input class="ipt" type="text" v-model="phoneNumber" placeholder="请输入收件人电话号码" />
			</view>
			<view class="item">
				<view class="left">所在地区</view>
				<view class="ipt city" @tap="selectCity" v-if="label==''">请点击选择地址</view>
				<view class="text" @tap="selectCity" v-else>{{ label }}</view>
				<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
			</view>
			<view class="item">
				<view class="left">详细地址</view>
				<input class="ipt" type="text" v-model="detailAddress" placeholder="输入详细地址" />
			</view>
			<view class="item">
				<view class="left">设置默认地址</view>
				<switch class="ipt switch" :checked="isShow" @change="switchChange" />
			</view>
		</view>
		<!-- 删除收货地址 -->
		<view class="delBtn" @tap="del" v-if="this.addressId != undefined">
			<view class="del">删除收货地址</view>
		</view>
		<!-- 保存地址 -->
		<view class="btns">
			<view class="btn" @tap="preserve">保存地址</view>
		</view>
	</view>
</template>

<script>
	import { addAddressInfo,delAddressInfo,switchDefault,findAllAddress,updateAddressInfo } from "../../../../api/user/index.js";
	import mix from "../../../../mixins/index.js";
	// 引入 - 省市区
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	export default {
		mixins: [mix],
		data() {
			return {
				name: "", // 添加 - 收件人
				cityCode: "", // 添加 - 收件人
				phoneNumber: "", // 添加 - 电话号码
				detailAddress: "", // 添加 - 详细地址
				defaultStatus: 0, // 添加 - 设置默认地址
				province: "", // 添加 - 所在地区 - 省份/直辖市
				city: "", // 添加 - 所在地区 - 城市
				region: "", // 添加 - 所在地区 - 区
				cityPickerValueDefault: [0,0,0], // 添加 - 省市区
				label: "", // 添加 - 所在地区
				isShow: false, // 更新 - 显示是否选中
				addressId: "", // 更新 - 删除地址|切换默认状态
				defaultStatus: 1, // 更新 - 切换默认状态
				list: [], // 地址 - 列表
			};
		},
		components: {
		        simpleAddress
		},
		onLoad(options) {
			this.addressId = options.addressId;
			// 判断是否登录
			if(this.checkLogin()){
				// 判断 - 是否是更新
				if(this.addressId != undefined){
					findAllAddress().then(res=>{
						this.list = res.data.data.items;
						var item = this.list.filter(ele=>ele.id == this.addressId);
						this.name = item[0].name;
						this.phoneNumber = item[0].phoneNumber;
						this.detailAddress = item[0].detailAddress;
						this.province = item[0].province;
						this.city = item[0].city;
						this.region = item[0].region;
						this.label = this.province + '-' + this.city + '-' + this.region;
						this.cityCode = item[0].cityCode;
						// index 为获取的地址组件所回显时的默认地址下标
						var index = this.$refs.simpleAddress.queryIndex(this.cityCode.split("-"), 'value');
						this.cityPickerValueDefault = index.index;
						this.defaultStatus = item[0].defaultStatus;
						if(item[0].defaultStatus == 0){
							this.isShow = false
						}else{
							this.isShow = true
						}
					})
				}
			}else{
				uni.navigateTo({
					url: "../../login/login"
				})
			}
		},
		methods:{
			// 删除地址
			del(){
				delAddressInfo(this.addressId).then()
			},
			// 所在地区 - 省市区 - 确定
			onConfirm(e){
				console.log(e)
				this.label = e.label;
				this.province = e.labelArr[0];
				this.city = e.labelArr[1];
				this.region = e.labelArr[2];
				this.cityCode = e.provinceCode + '-' + e.cityCode + '-' + e.areaCode;
			},
			// 所在地区 - 省市区 - 打开
			selectCity(){
				this.$refs.simpleAddress.open();
			},
			// 设置默认地址
			switchChange(){
				if(this.defaultStatus == 0){
					this.defaultStatus = 1;
					this.isShow = true
				}else{
					this.defaultStatus = 0;
					this.isShow = false
				}
			},
			// 保存地址
			preserve(){
				// 判断 - 新增地址|更新地址
				if(this.addressId == undefined){
					// 新增地址
					addAddressInfo({
					  "city": this.city,
					  "cityCode": this.cityCode,
					  "defaultStatus": this.defaultStatus,
					  "detailAddress": this.detailAddress,
					  "name": this.name,
					  "phoneNumber": this.phoneNumber,
					  "province": this.province,
					  "region": this.region,
					}).then(res=>{
						// 判断 - 是否保存成功
						if(res.data.success){
							uni.showToast({
								title: "保存成功"
							})
							setTimeout(function(){
								uni.navigateBack()
							},1000)
						}else{
							uni.showToast({
								title: res.data.message,
								icon: "error"
							})
						}
					})
				}else{
					// 切换默认状态
					switchDefault(this.addressId,this.defaultStatus).then();
					// 更新地址
					updateAddressInfo({
						"city": this.city,
						"cityCode": this.cityCode,
						"defaultStatus": this.defaultStatus,
						"detailAddress": this.detailAddress,
						"id": this.addressId,
						"name": this.name,
						"phoneNumber": this.phoneNumber,
						"province": this.province,
						"region": this.region
					}).then(res=>{
						// 判断 - 是否保存成功
						if(res.data.success){
							uni.showToast({
								title: "保存成功"
							})
							setTimeout(function(){
								uni.navigateBack()
							},1000)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "./index.scss"
</style>
